<template>
 <div class="home">
    <scroller class="my-scroller"
          :on-infinite="infinite"
          :on-refresh = "refresh"
          
           ref="myScroller"
          >

           <swiper :list="swiperList" :loop='true'></swiper>

            <marquee class="my-marquee">
              <marquee-item v-for="i in marqueeList" :key="i.title" class="align-middle"><a :href="i.link">{{i.title}}</a></marquee-item>
            </marquee>

           <panel :list="newsData" class="panel"></panel>
           <panel :list="moreData" class="panel"></panel><router-view></router-view>
          
       </scroller>
 </div>
</template>

<script>

  let newData = {
      index: 0,
      data: ['A', 'B01', 'B02', 'B03', 'B04', 'B05', 'B06', 'B07', 'B08', 'B09', 'B010'],
      fn: function(){
        var key = this.data[this.index];
        this.index++;
        if(this.index == this.data.length) { this.index =0;}
        return key;
      },
      initLoaded: false
  }
  
  import {  Swiper, Marquee, MarqueeItem,  Panel } from 'vux'

  export default {
    name: 'home',
    data(){
      return {
        title: {left: '直播', main: '网易',right:'搜索' },
        swiperList:  [],
        marqueeList: [],
        newsData: [],
        moreData: [],
        page:10
      }
    },
    created(){
      this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/1-9.html')
        .then(data => {

          this.swiperList =  data.focus.filter( item => {
                return item.addata === null;
            }).map(item => {
                return {
                  url: item.link,
                  img: item.picInfo[0].url,
                  title: item.title
                }
            })

          this.marqueeList = data.news.map(item => {
              return {
                title: item.title,
                link: item.link
              }
          })

          this.newsData = data.list.map(item => {
                 var src = '';
                if(item.picInfo[0]){
                    src = item.picInfo[0].url 
                }
                return {
                  url: item.link,
                  title: item.title,
                  src: src,
                  desc:item.digest
                }
          })

          newData.initLoaded = true;
           
       })
    },
    methods: {
        refresh(){
            this.newsData.sort(()=>{
               return Math.random() -0.5
            })
            this.$refs.myScroller.finishPullToRefresh();
            this.$vux.toast.text('当前刷新了10条数据',top)
        },
        infinite(){
           if(!newData.initLoaded){
             this.$refs.myScroller.finishInfinite();
             return;
           }
           setTimeout( ()=>{
              let n = this.page+9;
              this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${this.page}-${n}.html`).then(data => {
                     let newdata = data.list.map(item => {
                          var src = '';
                          if(item.picInfo[0]){
                            src = item.picInfo[0].url 
                          }
                         return{
                            url: item.link,
                            title: item.title,
                            src: src,
                            desc:item.digest
                          }
                      })
                      this.moreData = this.moreData.concat(newdata);
                      this.$refs.myScroller.finishInfinite();
                      this.page +=10;
              })
           },1000)
           console.log(this.page);
           
        }
    },
    components: {
      Swiper,
      Marquee,
      MarqueeItem,
      Panel
    }
 
}
</script>


<style lang ='less'>
  .home {
    .my-scroller {
     .pull-to-refresh-layer { padding-top:90px;}
     .loading-layer { padding-bottom:60px;}     
  }

  .my-marquee { 
    margin: 10px auto;
    .align-middle { 
      text-align: center; 
      a { color: #f00;}
    }
  }

  .panel {
     .weui-media-box__hd,  .weui-media-box__hd img {
        width: 102px;
        height: 78px;
    }
    .weui-media-box__bd { height: 78px;}
   
  }
  }
</style>
